<template>
  <div class="outer" @click="cancelPop($event)">
    <div class="center-outer">
      <div class="download-center">
        <div class="boundary"></div>
        <div class="client">
          <div class="center">
            <div class="apply">
              <div class="pc">
                <div class="span">
                  <span>在电脑上听</span>
                </div>
                <img
                  src="../../assets/image/download/ia_500000001.jpg"
                  alt=""
                />
                <div class="aaa">
                  <img
                    src="../../assets/image/download/ia_500000009.png"
                    alt=""
                  />
                  <span class="iconfont icon-weiruan">&nbsp;&nbsp;Windows</span>
                </div>
                <button class="btn">下载电脑端</button>
              </div>
              <div class="mobile">
                <div class="span">
                  <span>在手机上听</span>
                </div>
                <img
                  src="../../assets/image/download/ia_500000002.jpg"
                  alt=""
                />
                <div class="bbb">
                  <img
                    src="../../assets/image/download/ia_500000011.png"
                    alt=""
                  />
                  <span class="iconfont icon-anzhuo">&nbsp;&nbsp;Android</span>
                </div>
                <button class="btn">
                  <img
                    src="../../assets/image/download/ia_1100000013.png"
                    alt=""
                  />
                  下载手机端
                </button>
              </div>
              <div class="else" @click="handleShow">
                <span class="iconfont icon-xiazai"></span>
                其他操作系统客户端
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pop-up" v-show="show">
      <div class="triangle"></div>
      <div class="margin">
        <div class="versions">
          <div><span class="iconfont icon-android"></span>Android版</div>
          <div><span class="iconfont icon-pingguo"></span>iPhone版</div>
          <div><span class="iconfont icon-pingguo"></span>iPad版</div>
          <div><span class="iconfont icon-cha-shixin-"></span>Mac版</div>
          <div><span class="iconfont icon-weiruan"></span>PC版</div>
          <div><span class="iconfont icon-weiruan"></span>UWP版</div>
          <div><span class="iconfont icon-weiruan"></span>WP版</div>
          <div><span class="iconfont icon-linux"></span>Linux版</div>
        </div>
      </div>
    </div>
    <div class="code">
      <img src="../../assets/image/download/ia_500000000.jpg" alt="" />
      <span>扫描二维码下载</span>
    </div>
    <div>
      <div class="image-text">
        <div class="text">
          <h1>千万曲库 首首CD音质</h1>
          <span>囊括百万无损SQ音乐，你在用手机听歌时，</span>
          <span>也能感受到纤毫毕现的CD音质，更能免费离线收听</span>
        </div>
        <img src="../../assets/image/download/ia_1400000003.jpg" alt="" />
      </div>
      <div class="background">
        <div class="image-text">
          <img src="../../assets/image/download/ia_1400000004.jpg" alt="" />
          <div class="text">
            <h1>千位明星 亲自推荐音乐</h1>
            <span>韩红，戴佩妮等千位明星已入驻，亲自创建私房歌单，录制独</span>
            <span>家DJ节目，推荐他们心中的好音乐</span>
          </div>
        </div>
      </div>
      <div class="image-text">
        <div class="text">
          <h1>社交关系 发现全新音乐</h1>
          <span>你可以关注明星、DJ和好友，通过浏览他们的动态、收藏和</span>
          <span>分享，发现更多全新好音乐</span>
        </div>
        <img src="../../assets/image/download/ia_1400000005.jpg" alt="" />
      </div>
      <div class="background">
        <div class="image-text">
          <img src="../../assets/image/download/ia_1400000006.jpg" alt="" />
          <div class="text">
            <h1>手机电脑 歌单实时同步</h1>
            <span>只要一个帐号，你就可以同步在手机、电脑上创建、收藏</span>
            <span>的歌单，随时随地畅享好音乐</span>
          </div>
        </div>
      </div>
      <div class="image-text">
        <div class="text">
          <h1>听歌识曲 助你疯狂猜歌</h1>
          <span>歌曲很动听却不知道歌名，歌名在嘴边却想不起来……</span>
          <span>用听歌识曲功能，几秒钟就知道歌名</span>
        </div>
        <img src="../../assets/image/download/ia_1700000007.jpg" alt="" />
      </div>
    </div>
    <!-- <div class="background">
      <div class="bottom">
        <div class="bottom-center">
          <div class="left">
            <div class="one">
              <p>服务条款</p>
              <span>|</span>
              <p>隐私政策</p>
              <span>|</span>
              <p>儿童隐私政策</p>
              <span>|</span>
              <p>版权投诉指引</p>
              <span>|</span>
              <p>意见反馈</p>
              <span>|</span>
            </div>
            <p class="two">
              网易公司版权所有©1997-2021&nbsp;&nbsp;杭州乐读科技有限公司运营：浙网文[2021]
              1186-054号
            </p>
            <p class="three">
              违法和不良信息举报电话：0571-89853516&nbsp;&nbsp;
              举报邮箱：ncm5990@163.com
            </p>
            <p class="four">
              粤B2-20090191-18 &nbsp;工业和信息化部备案管理系统网站
              <img src="../../assets/image/ia_100000000163.png" alt="" />
              浙公网安备 33010902002564号
            </p>
          </div>
          <div class="right">
            <img src="../../assets/image/_20210602163250.png" alt="" />
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'Download',
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleShow() {
      console.log('打开窗口')
      this.show = true /*
      document.documentElement.style.overflow = 'scroll' */
    },
    hideBox() {
      document.addEventListener('click', (e) => {
        // 如果当前点击的这个对象是这个模态框的话
        if (e.target.closest('.pop-up')) {
          //  那么这个模态框还是显示的
          this.show = true
        } else if (!e.target.closest('.else')) {
          // 如果当前点击的这个对象是这个show按钮以外的对象，那么这个模态框就隐藏
          this.show = false
        }
      })
    }
  },
  mounted() {
    // 页面加载的时候调用监听
    this.hideBox()
  }
}
</script>

<style scoped>
.outer {
  width: 100%;
  height: 715px;
  overflow-y: scroll;
}
.center-outer {
  width: 100%;
  background-color: #222;
}
.download-center {
  width: 1100px;
  margin: 0 auto;

  /* background-color: #c20c0c; */
}
.client {
  padding: 0;
  width: 100%;
  height: auto;
  background-color: #222222;
}
.center {
  padding: 80px 0 112px;
}
.center .apply {
  display: flex;
  justify-content: space-around;
  position: relative;
}
.center .apply .pc {
  width: 464px;
  height: 468px;
  text-align: center;
}
.center .apply .mobile {
  width: 300px;
  height: 465px;
  margin: 0 0 0 220px;
}
.center .apply .pc img {
  width: 464px;
  height: 273;
}
.center .apply .pc .pcImg {
  width: 154px;
}
.center .apply .mobile img {
  width: 246px;
  height: 273;
}
.center .apply div .span {
  font-size: 22px;
  color: #fff;
  padding: 0 0 23px 0;
  text-align: center;
}
.else {
  cursor: pointer;
  position: absolute;
  top: -80px;
  right: 0px;
  font-size: 14px;
  color: #fff;
  width: 170px;
  height: 60px;
  line-height: 60px;
}
.else:hover {
  color: rgba(225, 225, 225, 0.7);
}
.else span {
  font-size: 20px;
}
.center .apply .pc .aaa {
  text-align: center;
  margin: 20px 0;
}
.center .apply .pc .aaa span {
  color: #fff;
  font-size: 16px;
  vertical-align: middle;
  margin-left: 20px;
}
.center .apply .pc .aaa img {
  width: 154px;
  height: 44px;
  vertical-align: middle;
}
.center .apply .mobile .bbb {
  text-align: center;
  margin: 20px 0;
}
.center .apply .mobile .bbb span {
  color: #fff;
  font-size: 16px;
  vertical-align: middle;
  margin-left: 20px;
}
.center .apply .mobile .bbb img {
  width: 120px;
  height: 44px;
  vertical-align: middle;
}
.center .apply .pc .btn {
  cursor: pointer;
  width: 300px;
  height: 65px;
  font-size: 22px;
  background-color: #fff;
  color: #d10000;
  border-radius: 65px;
  border: 0;
}
.center .apply .mobile .btn {
  width: 300px;
  height: 65px;
  font-size: 22px;
  cursor: pointer;
  background-color: #fff;
  color: #d10000;
  border-radius: 65px;
  border: 0;
}
.center .apply .btn:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: #b13f3f;
}
.center .apply .mobile .btn img {
  width: 21px;
  height: 21px;
  vertical-align: middle;
  margin-right: -4px;
}
.outer .code {
  width: 100px;
  height: 125px;
  border-radius: 8px;
  background-color: #fff;
  padding: 16px 16px 9px 16px;
  text-align: center;
  position: fixed;
  right: 60px;
  bottom: 250px;
}
.outer .code img {
  width: 100px;
  height: 100px;
  display: block;
  text-align: center;
}
.outer .code span {
  font-size: 12px;
  color: #333;
  margin-top: 10px;
  text-align: center;
  display: block;
}
.image-text {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  padding: 75px 0 75px 0;
}
.image-text .text {
  width: 419px;
}
.image-text .text h1 {
  color: #333;
  font-size: 40px;
  margin: 45px 0 5px 0;
}
.image-text .text span {
  color: #666;
  font-size: 16px;
}
.image-text img {
  display: inline-block;
}
.image-text:nth-child(2n) {
  background-color: #f8f8f8;
}
.background {
  padding: 0;
  width: 100%;
  height: auto;
  background-color: #f8f8f8;
}
.image-text:first-child {
  padding: 110px 0;
}
.image-text:nth-child(5) {
  padding: 20px 0;
}
/* .bottom {
  border-top: 1px solid #e0dddd;
}
.bottom .bottom-center {
  width: 980px;
  margin: 0 auto;
  padding-top: 15px;
  padding-bottom: 50px;
  color: #333;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.bottom-center .left .one {
  display: flex;
  color: #999;
  padding: 4px 0;
}
.bottom-center .left .one span {
  padding: 0 10px;
}
.bottom-center .left .two {
  padding: 4px 0;
}
.bottom-center .left .four {
  padding: 4px 0;
}
.bottom-center .left .four img {
  width: 14px;
  height: 14px;
}
.bottom-center .left .three {
  padding: 4px 0;
}
.right > img {
  width: 460px;
  height: 113px;
}
.background {
  width: 100%;
  background-color: #f5f1f1;
} */
.pop-up {
  width: auto;
  height: auto;
  background-color: #222;
  position: relative;
  top: -615px;
  right: -995px; /*
  display: none; */
  z-index: 9998;
}
.pop-up .triangle {
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent #fff transparent;
  position: relative;
  left: 220px;
}
.pop-up .versions {
  background-color: #fff;
  width: 240px;
  height: 220px;
  border-radius: 12px;
}
.pop-up .margin .versions {
  padding: 18px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: center;
}
.pop-up .margin .versions div {
  cursor: pointer;
  margin: 5px;
  width: 110px;
  height: 44px;
  background-color: #f5f1f1;
}
.pop-up .margin .versions div span {
  line-height: 44px;
  font-size: 16px;
  color: #333;
  margin-right: 5px;
}
.pop-up .margin .versions div .iconfont {
  font-size: 20px;
}
</style>
